import React, { Component, PropTypes } from 'react';
import Echarts from 'echarts';
import Moment from 'moment';
import { connect } from 'dva'
import {
  Input,
  Button,
  Select,
  Form,
  Modal,
  Row,
  Col,
  Icon,
  message,
} from 'antd';
import Style from './home.less';
import NumberPlay from '../../util/numberPlay';
import $ from 'jquery';
import Service from "../../service";
const FormItem = Form.Item;
const createForm = Form.create;
const Option = Select.Option;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      page: 1,
      pageSize: 15,
      loading: 'none'
    };
  }
  componentDidMount() {
    let self = this;
    const mobile_token = localStorage.getItem('token');
    self.props.queryList({
      params: {
        token: mobile_token,
        page: 1,
        page_size: self.state.pageSize
      },
      func: function (data) {
        // console.log(data)
      }
    })

    $(window).scroll(function () {
      let totalNum = self.props.totalPage;
      let currentNum = self.state.page * self.state.pageSize;
      // console.log($(window).scrollTop()+$(window).height())
      // console.log($(document).height())
      if ($(window).scrollTop() + $(window).height() + 1 >= $(document).height()) {
        // console.log(self.props.msgmore)
        if (self.props.msgmore) {
          self.pageMore(self.state.page);
        }

      }
    });

  }
  componentWillUnmount() {
    if (this.state.timer != null) {
      clearInterval(this.state.timer);

    }
  }
  pageMore = (page) => {
    var self = this;
    const token = localStorage.getItem('token');
    self.setState({
      page: page + 1
    }, function () {
      // console.log(this.state.page);
      self.props.queryList({
        params: {
          token: token,
          page: self.state.page,
          limit: self.state.pageSize
        },
        func: function (data) {
          if (data && data.error_code == '401') {
            message.success('请先设置支付密码后再进行交易', 1.5, function () {
              self.context.router.push(`/1/app/mytranpwd`);
            })
          }
        }
      })
    });
  }
  mindexurlFun = () => {
    this.context.router.push(`/1/app/mindex`);
  }
  mapurlFun = () => {
    this.context.router.push(`/1/app/mmap`);
  }
  returnFun = () => {
    this.context.router.push(`/1/app/mmy`);
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { msglist } = this.props;
    let decoratedata = msglist || [];

    // console.log(msglist);
    return (
      <div className={Style.wrap + ' ' + Style.wrapGray} style={{ minHeight: '100%' }}>
        <div className={Style.headWrap}>
          <div className={Style.navTitle}>
            <span className={Style.arrow} onClick={this.returnFun}>
              <Icon type="left" />
            </span>
            消息通知
          </div>
        </div>

        <div className={Style.messageScreen}>
          {decoratedata.length > 0 &&
            <div className={Style.messageWrap}>
              {
                decoratedata.map((item, i) => (
                  <div className={Style.item}>
                    <div className={Style.title}>
                      {item.content}
                    </div>
                    <p>快递员：{item.realname}；联系方式：{item.mobile}；当前地址：{item.address}；{item.content}。</p>
                    <div className={Style.time}>
                      {Moment(item.updatetime * 1000).format("YYYY.MM.DD HH:mm:ss")}
                    </div>
                  </div>
                ))
              }

            </div>

          }
          {decoratedata.length < 1 &&
            <div className={Style.nomsgWrap}>
              <em className={Style.nomsgicon}></em>
              <p>主人，您暂时还没有新的消息！</p>
            </div>
          }
        </div>
      </div>
    )
  }
}

App.contextTypes = {
  router: React.PropTypes.object
}

function mapStateToProps(state, ownProps) {
  // console.log(state)
  return {
    msglist: state.mmodel.msgList,
    msgmore: state.mmodel.msgmore,
    loading: !!state.loading.global
  }
}

function dispatchToProps(dispatch) {
  return {
    queryList(payload, params) {
      dispatch({ type: 'mmodel/msgserch', payload })
    }

  }
}
export default connect(mapStateToProps, dispatchToProps)(Form.create()(App));
